<template>
  <div class="box">
    <!-- <div id="main">柱形统计表</div> -->
    <div ref="chartContainer"></div>
    <!-- <div class="test">
            试一试
        </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const chartContainer = ref<HTMLDivElement | null>(null)

onMounted(() => {
  const element = chartContainer.value

  // 操作节点样式
  if (element) {
    element.style.height = '23rem'
    element.style.width = '35rem'
    // element.style.paddingTop = '1rem'
    // element.style.padding = '1rem'
    // element.style.background = "red"
    // ...
  }
  initChart()
})

const initChart = () => {
  if (chartContainer.value) {
    // 创建图表实例
    const chart = echarts.init(chartContainer.value)

    var scale = 1
    var echartData = [
      {
        value: 12,
        name: '垃圾车'
      },
      {
        value: 2,
        name: '健身设施'
      },
      {
        value: 3,
        name: '喷泉'
      },
      {
        value: 2,
        name: '公共厕所'
      },
      {
        value: 4,
        name: '牢山古柏'
      },
      {
        value: 1,
        name: '湖面上的亭子'
      }
    ]
    var rich = {
      yellow: {
        color: '#ffc72b',
        fontSize: 30 * scale,
        padding: [5, 4],
        align: 'center'
      },
      total: {
        color: '#ffc72b',
        fontSize: 40 * scale,
        align: 'center'
      },
      white: {
        color: '#fff',
        align: 'center',
        fontSize: 14 * scale,
        padding: [21, 0]
      },
      blue: {
        color: '#49dff0',
        fontSize: 16 * scale,
        align: 'center'
      },
      hr: {
        borderColor: '#0b5263',
        width: '100%',
        borderWidth: 1,
        height: 0
      }
    }
    // 配置图表选项
    const options: echarts.EChartsOption = <any>{
      backgroundColor: '#031f2d',
      title: {
        text: '当前公园资产',
        // left: 'center',
        left: '5',
        padding: [20, 0],
        textStyle: {
          color: '#fff',
          fontSize: 18 * scale,
          align: 'center'
        }
      },
      legend: {
        selectedMode: false,
        formatter: function (name) {
          var total = 0 //各科正确率总和
          // var averagePercent //综合正确率
          echartData.forEach(function (value, index, array) {
            total += value.value
          })
          return '{total|' + total + '}'
        },
        data: [echartData[0].name],
        // data: ['高等教育学'],
        // itemGap: 50,
        left: 'center',
        top: 'center',
        icon: 'none',
        align: 'center',
        textStyle: {
          color: '#fff',
          fontSize: 16 * scale,
          rich: rich
        }
      },
      series: [
        {
          name: '总古树数量',
          type: 'pie',
          radius: ['42%', '50%'],
          // hoverAnimation: true,
          color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
          label: {
            normal: {
              formatter: function (params, ticket, callback) {
                var total = 0 //考生总数量
                var percent = 0 //考生占比
                echartData.forEach(function (value, index, array) {
                  total += value.value
                })
                percent = ((params.value / total) * 100).toFixed(1)
                return (
                  '{white|' +
                  params.name +
                  '}\n{hr|}\n{yellow|' +
                  params.value +
                  '}\n{blue|' +
                  percent +
                  '%}'
                )
              },
              rich: rich
            }
          },
          labelLine: {
            normal: {
              length: 55 * scale,
              length2: 0,
              lineStyle: {
                color: '#0b5263'
              }
            }
          },
          data: echartData
        }
      ]
    }

    // 设置图表数据
    chart.setOption(options)
  }
}
</script>

<style scoped>
.box {
  height: 100%;

  .test {
    width: 100%;
    height: 100%;
    background: red;
  }
}
</style>
